import React, { useEffect, useState } from 'react'
import style from './viewPlan.less'
import { viewlist, selectClassPlanInit, classRank } from '@/services'
import { Iviewlist, Iheadlist, Ispanlist, Iranking } from '@/utils/interface'
import { Select, Progress, Table } from 'antd';
import { TeamOutlined, CheckCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';

const viewPlan: React.FC = () => {
    const { Option } = Select;
    const [list, setlist] = useState<Iviewlist[]>([])
    const [params, setparams] = useState({ classid: "", classPlanid: "" })
    const [spanlist, setspanlist] = useState<Ispanlist>({} as Ispanlist)
    const [rankinglist, setrankinglist] = useState<Iranking[]>([])

    const columns = [
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'id',
        },
    ];
    const  getDaysBetween=(dateString1: string,dateString2: string)=>{
        var  startDate = Date.parse(dateString1);
        var  endDate = Date.parse(dateString2);
        if (startDate>endDate){
            return 0;
        }
        if (startDate==endDate){
            return 1;
        }
        var days=Math.floor((endDate - startDate)/(1*24*60*60*1000));
        return  days;
    }
    useEffect(() => {
        viewlist().then(res => {
            if (res.code == 200) {
                setlist([...res.data])
            }
        })
        cla()
    }, [])
    useEffect(() => {
        cla()
        cla2()
    }, [params])
    const cla = () => {
        selectClassPlanInit(params).then(res => {
            if (res.code == 200) {
                setspanlist({ ...res.data })
                console.log(spanlist)
            }
        })
    }
    const cla2 = () => {
        classRank(params).then(res => {
            if (res.code == 200) {
                setrankinglist([...res.data])
            }
        })
    }
    const handleChange = (value: string) => {
        setparams({ ...params, classid: list.filter(item => item.id == value)[0].classid, classPlanid: value })
    }
    return <>
        <div className={style.viewPlan}>
            <div className={style.header}>
                <span>进度</span> / 进度监控
       </div>
            <div className={style.main_h}>
                <div className={style.main_h1}>
                    <div>
                        <div>{spanlist.className}</div>
                        <div>{spanlist.planname}</div>
                        <div>{spanlist.begintime}~{spanlist.endtime}</div>
                    </div>
                    <div>
                        <Select className={style.input} onChange={handleChange}>
                            {
                                list.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.planname}</Option>
                                })
                            }

                        </Select>
                    </div>
                </div>
                <div className={style.main_h2}>
                    <div>
                        <span className={style.span1}>{spanlist.countStus}</span>
                        <span>总人数</span>
                    </div>
                    <div>
                        <span className={Number(spanlist.progress) > 0 ? style.span2 : style.span2_1}>{spanlist.progress}%</span>
                        <span>完成率</span>
                    </div>
                    <div>
                        <span className={style.span3}>{spanlist.countCompleted == null ? "0" : spanlist.countCompleted}</span>
                        <span>按期完成人数</span>
                    </div>
                    <div>
                        <span className={style.span4}>{spanlist.countUncompleted}</span>
                        <span>延期未完成人数</span>
                    </div>
                </div>
            </div>
            <div className={style.main_m}>
                <div>
                    {
                        spanlist.list && spanlist.list.map(item => {
                            return <div key={item.id}>
                                <h2>{item.groupname}</h2>
                                <div><Progress percent={item.groupProgress} className={style.Progress} status="active" /></div>
                                <div>
                                    <span><TeamOutlined className={style.i} /><span>人员</span> <span>{item.members}</span> </span>
                                    <span><CheckCircleOutlined className={style.i} /><span>按期完成</span> <span>{item.finished}</span> </span>
                                    <span><ClockCircleOutlined className={style.i} /><span>延期未完成</span> <span>{item.unfinished}</span> </span>
                                </div>
                                <div>
                                    <span><span className={style.i1}></span><span>完成</span></span>
                                    <span><span className={style.i2}></span><span>进行中</span></span>
                                    <span><span className={style.i3}></span><span>未进行</span></span>
                                </div>
                                <div>
                                    <Table pagination={false} rowKey="username" columns={[...columns,{
                                        title: item.myProject.map(e=>e.proname),
                                        dataIndex:"",
                                        key:Number(item.myProject.map(e=>e.proid)),
                                        width:200
                                    },
                                    {
                                        title: `时长:${getDaysBetween(String(item.myProject.map(e=>e.beginTime)), String(item.myProject.map(e=>e.endTime)))}天`,
                                        dataIndex:"",
                                        key:item.id,
                                        align:"right"
                                    },
                                    ]} dataSource={item.stuList}/>
                                </div>
                            </div>
                        })
                    }
                </div>
                <div>
                    <h1>班级排行榜</h1>
                    <ul>
                        {
                            rankinglist == [] ? "暂无数据" : rankinglist.map((item, index) => {
                                return <li key={item.userid}>
                                    <div>第{index + 1}名</div>
                                    <div><img src={"http://111.203.59.61:8060" + item.studentUrl} alt="" /></div>
                                    <div>
                                        <span>{item.username}</span>
                                        <span>{item.groupname}</span>
                                    </div>
                                    <div>
                                        <span className={item.taskCompletedpProgress == 1 ? style.wan : style.mei}>{item.taskCompletedpProgress * 100}%</span>
                                        {item.taskCompletedpProgress == 1 ? <span>{item.endtime}</span> : ''}

                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        </div>
    </>
}
export default viewPlan